<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>登录日志</el-breadcrumb-item>
    </el-breadcrumb>
    <div>
      <el-card class="box-card" style="width: 1220px">
        <div slot="header" class="clearfix">
          <span style="font-size: 20px;"><i class="el-icon-s-unfold"></i>数据列表</span>
        </div>
        <!--表格数据-->
        <div>
          <el-table :data="tableData" border="" style="width: 100%;fit:true">
            <el-table-column prop="loginTime" label="时间">
            </el-table-column>
            <el-table-column prop="loginName" label="用户名">
            </el-table-column>
            <el-table-column prop="location" label="地区">
            </el-table-column>
            <el-table-column prop="browserName" label="浏览器">
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-sizes="pageSizeList" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total" align="center">
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      //展示数据
      tableData: [],
      // 当前页码
      currentPage: 1,
      // 页大小
      pageSize: 10,
      // 页大小列表
      pageSizeList: [10, 20, 50, 100],
      // 总记录数
      total: 0,
    }
  },
  methods: {
    async getLoginInfo () {
      const { data: res } = await this.$http.get(`/system/loginLog/findPage?page=${this.currentPage}&size=${this.pageSize}`)
      this.total = res.total
      this.tableData = res.rows
    },
    // 页大小改变
    async handleSizeChange (val) {
      this.pageSize = val
      this.getLoginInfo()
    },

    // 页码改变
    async handleCurrentChange (val) {
      this.currentPage = val
      this.getLoginInfo()
    },
  },
  async created () {
    this.getLoginInfo()
  }
}
</script>

<style>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.el-table td,
.el-table th {
  text-align: center;
}
.box-card {
  width: 480px;
}
</style>